<template>
  <view class="swiper-banner">
    <swiper 
      class="swiper" 
      :indicator-dots="true" 
      :autoplay="true" 
      :interval="3000" 
      :duration="500"
      :circular="true"
      indicator-color="rgba(255, 255, 255, 0.6)"
      indicator-active-color="#ffffff"
    >
      <swiper-item v-for="(item, index) in banners" :key="index" @click="handleClick(item)">
        <image :src="item.image" mode="aspectFill" class="banner-image"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  name: 'SwiperBanner',
  props: {
    banners: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick(item) {
      if (item.url) {
        if (item.type === 'product') {
          uni.navigateTo({
            url: `/pages/product/detail/index?id=${item.productId}`
          })
        } else if (item.type === 'category') {
          uni.navigateTo({
            url: `/pages/browse/category/products?id=${item.categoryId}`
          })
        } else if (item.type === 'url') {
          uni.navigateTo({
            url: item.url
          })
        } else if (item.type === 'webview') {
          uni.navigateTo({
            url: `/pages/webview/index?url=${encodeURIComponent(item.url)}&title=${encodeURIComponent(item.title || '')}`
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-banner {
  width: 100%;
  height: 350rpx;
  
  .swiper {
    width: 100%;
    height: 100%;
    
    .banner-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style> 